<template>
  <view
    class="cell-group cell-group--fix"
    :class="[{ 'cell-group--inset': inset, 'cell-group--gray': gray, 'cell-group--round': round }]"
  >
    <view v-if="$slots.title || title" class="cell-group__title">
      <slot v-if="$slots.title" name="title" />
      <template v-else>
        {{ title }}
      </template>
    </view>
    <view
      v-if="$slots.default"
      class="cell-group__wrap"
      :class="[{ 'cell-group__wrap--has-inner-title': $slots.innerTitle || innerTitle }]"
    >
      <view
        v-if="$slots.innerTitle || innerTitle"
        class="cell-group__inner-title"
        :class="[{ 'cell-group__inner-title--bold': bold }]"
      >
        <slot v-if="$slots.innerTitle" name="innerTitle" />
        <template v-else>
          {{ innerTitle }}
        </template>
      </view>
      <slot />
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, provide } from '@vue/composition-api'
import settings from '@/settings'

export default defineComponent({
  props: {
    // 自定义title区域
    title: {
      type: String,
      default: '',
    },
    innerTitle: {
      type: String,
      default: '',
    },
    inset: {
      type: Boolean,
      default: settings.css['--card-style'] === 'card',
    },
    round: {
      type: Boolean,
      default: false,
    },
    border: {
      type: Boolean,
      default: true,
    },
    size: {
      type: String,
      default: 'md',
    },
    iconSize: {
      type: [Number, String],
      default: 40,
    },
    weight: {
      type: String,
      default: null,
    },
    subSize: {
      type: String,
      default: 'md',
    },
    gray: {
      type: Boolean,
      default: false,
    },
    bold: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    provide('cellParent', {
      border: props.border,
      size: props.size,
      iconSize: props.iconSize,
      weight: props.weight,
      round: props.round,
    })

    return {}
  },
})
</script>
<style lang="scss">
.cell-group {
  &__title {
    display: inherit;
    padding: 0 24rpx;
    color: #e76a60;
    font-size: 26rpx;
    line-height: 26rpx;
    margin-top: 48rpx;
    margin-bottom: 14rpx;
  }
  &__inner-title {
    height: 37rpx;
    font-size: 26rpx;
    padding: 26rpx 24rpx 40rpx;
    &--bold {
      font-weight: bold;
    }
  }
  &__wrap {
    display: inherit;
    border-radius: 20rpx;
    background-color: #fff;
    margin: 20rpx 0;
    &--has-inner-title {
      padding-bottom: 8rpx;
    }
  }
  &--inset {
    margin: 0 24rpx;
  }
  &--gray {
    .cell-group__wrap {
      background: #f5f5f5;
      border: 1rpx solid #fff;
    }
  }
}
</style>
